Ext.define('SistIntegral.Proyecto', {
//extend: 'Ext.ux.desktop.Module',
requires: ['*'],
//id:'notepad',
Inicio  :   function(){

function colorBoolean(val) {
    if (val == 'true') {
        return '<span style="color:green;">SI</span>';
    } else if (val == 'false') {
        return '<span style="color:red;">NO</span>';
    }
    return val;
}
    
function colorFondo(val) {
    if(val!=null)
    return '<div  style="background-color:#'+val+';color:#'+val+'">'+val+'</div>'
    else
    return '';
}

function colorRiesgo(val,meta,record) {
if(val!=null)
    return '<div  style="background-color:#'+val+';"><h1>'+record.get('Riesgo')+'</h1></div>'
    else
    return '';
}

function colorEstado(val,meta,record) {
if(val!=null)
    return '<div  style="background-color:#'+val+';"><h1>'+record.get('Estado')+'</h1></div>'
    else
    return '';
}

function renderCoa(value, p, record) {
    
    return Ext.String.format(
        '<div style="display: block;white-space: normal;">'+value+
            (record.data.Ruc ? '</br><span style="color:#666666;">'
            +record.data.Ruc+ '</span>' : '')
        +'</div>'
    );
} 

function renderGlosa(value, p, record) {
    
    return Ext.String.format(
        '<div style="display: block;white-space: normal;">'+value
        +'</div>'
    );
}

function renderValidado(val){
    if (val == 'true') {
        return '<span style="color:green;">SI</span>';
    } else if (val == 'false') {
        return '<span style="color:red;">NO</span>';
    }
    return val;
}
    
var StoreProyecto= Ext.create('Ext.data.TreeStore', {
        fields: ['text','id','expanded','nivel'],
        proxy: {
            type: 'ajax',
            url: 'proyecto/TreeMenu'
        },
        root: { text: 'Proyectos', id: '1', nivel: '0', expanded: true},
        folderSort: true
});

var ArbolQR =  new Ext.tree.TreePanel({
    region: 'west',
    id: 'menuProyecto',
    width: 150,
    title: 'MENU',
    split: true,
    collapsible: true, 
    margins: {left: 0},
    border: true,
    autoScroll: true,
    useArrows: true,
    store:StoreProyecto,
    rootVisible: true
});

var TabPanel = Ext.create('Ext.tab.Panel', {
    id:'PnlProyecto',
    //bodyPadding:'5',
    autoScroll:true,
    activeTab: 0,
    layout:'fit',
    region: 'center',
    items: [{
            title: 'Bienvenido',
            bodyPadding: 10,
            html : 'Modulo de Monitoreo de Proyectos'
            }]
});

var PanelContenedor = Ext.create('Ext.panel.Panel', {
    id:'PnlContQR',
    layout: 'border',
    bodyBorder: false,
    border:false,
    defaults: {
        collapsible: true,
        split: true,
        animFloat: false,
        autoHide: false,
        useSplitTips: true
    },
    items:[TabPanel,ArbolQR]
});

ArbolQR.on('itemclick', function (node, rec, item, index, e) {
    
var tbar = null, panel = null,opts={},existe = null,tbargrid ={};
e.stopEvent();
     
if (rec.get('id') == '1' && !Ext.getCmp('PnlCurvaS')) {

    var StoreProyecto = Ext.create('Ext.data.Store', {
        model: 'Proyecto',
        pageSize:25,
        proxy: {
        type: 'ajax',
        url: 'proyecto/index',
        reader: {type: 'json',root: 'grid'}}
    });

    StoreProyecto.load();
    var cmbProyecto  = Ext.create('Ext.form.ComboBox', {
    id:'CmbProyectoCurvaS',
    emptyText : ' SELECCIONE PROYECTO',
    name:'IdProyecto',
    width:200,
    pageSize : 25,
    store: StoreProyecto,
    queryMode: 'remote',
    displayField: 'Proyecto',
    valueField: 'Id',
    autoSelect : false,
    forceSelection:true,
    allowBlank : false,
    minChars:1,
    listConfig: {
        loadingText: 'Buscando...',
        emptyText: 'Sin Resultados',
        getInnerTpl: function() {
            return '<a>' +
                '<h3></span>{Proyecto}'+'</h3>' +
                '<h4 class="sub1">Codigo: {Codigo}</h4>' +
            '</a>';
        }
    }
    });
    var moneda = 'S/. '
    cmbProyecto.on('change', function (combo, newValue, oldValue, eOpts) {

        Ext.getCmp('chboxAll').setValue('0');
        
        var StoreGrafGen = Ext.create('Ext.data.Store', {
        model: 'CurvaS',
        pageSize:25,
        proxy: {
        type: 'ajax',
        url: 'proyecto/CurvaS/'+newValue,
        reader: {type: 'json',root: 'grid'}}
        });
        
        var StoreComponentes = Ext.create('Ext.data.Store', {
        model: 'Componente',
        pageSize:25,
        proxy: {
        type: 'ajax',
        url: 'proyecto/Componentes/'+newValue,
        reader: {type: 'json',root: 'grid'}}
        });
        
        StoreComponentes.loadPage(1);
        
        
        var grafGen = Ext.create('Ext.chart.Chart', {
            xtype: 'chart',
            style: 'background:#fff',
            animate: true,
            columnWidth: 1,
            padding:'5',
            height:Ext.getCmp('PnlCurvaS').getHeight()-130,
            store: StoreGrafGen,
            shadow: true,
            theme: 'Category1',
            legend: {
                position: 'right'
            },
            axes: [{
                type: 'Numeric',
                minimum: 0,
                position: 'left',
                fields: ['AcumEjecutado', 'AcumProgramado'],
                minorTickSteps: 1,
                grid: {
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 0.5
                    }
                }
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['Fecha']//,
            }],
            series: [ {
                type: 'line',
                highlight: {size: 5,radius: 5},
                title : 'Ejecutado',
                style: {
                    fill: '#FF0000',
                    stroke: '#FF0000',
                    'stroke-width': 3
                },
                axis: 'left',
                smooth: true,
                xField: 'FecAcumEjecutado',
                yField: 'AcumEjecutado',
                tips: {
                    trackMouse: true,
                    width: 200,
                    height: 60,
                    renderer: function(storeItem, item) {
                        this.setTitle('Presupuestado vs Ejecutado');
                        this.update('Presupuestado: '+moneda+storeItem.get('AcumProgramado')+
                            '</br>'+'Ejecutado: '+moneda+storeItem.get('AcumEjecutado')+'</br>');
                    }
                },
                markerConfig: {
                    fill: '#FF0000',
                    stroke: '#FF0000',
                    type: 'circle',
                    size: 5,
                    radius: 5,
                    'stroke-width': 0
                }
            }, {
                type: 'line',
                highlight: {size: 5,radius: 5},
                title : 'Presupuestado',
                style: {
                    fill: '#18428E',
                    stroke: '#18428E',
                    'stroke-width': 3
                },
                axis: 'left',
                smooth: true,
                xField: 'Fecha',
                yField: 'AcumProgramado',
                tips: {
                    trackMouse: true,
                    width: 200,
                    height: 60,
                    renderer: function(storeItem, item) {
                        this.setTitle('Presupuestado vs Ejecutado');
                        this.update('Presupuestado: '+moneda+storeItem.get('AcumProgramado')+
                            '</br>'+'Ejecutado: '+moneda+storeItem.get('AcumEjecutado')+'</br>');
                    }
                },
                markerConfig: {
                    fill: '#18428E',
                    stroke: '#18428E',
                    type: 'circle',
                    size: 5,
                    radius: 5,
                    'stroke-width': 0
                }
            }]
        });  
        StoreGrafGen.loadPage(1);
        
        
    Ext.getCmp('PnlCurvaS').removeAll();   
    Ext.getCmp('PnlCurvaS').add(grafGen);
    
        StoreComponentes.on('load',function( objeto, records, successful, eOpts ){
            StoreComponentes.each(function(record) {
                
                var StoreGrafComp = Ext.create('Ext.data.Store', {
                id:record.get('IdComponente'),
                model: 'CurvaS',
                pageSize:25,
                proxy: {
                type: 'ajax',
                url: 'proyecto/CurvaSComp/'+newValue+'/'+record.get('IdComponente'),
                reader: {type: 'json',root: 'grid'}}
                });
                
                StoreGrafComp.loadPage(1);
                
            var grafComp = Ext.create('Ext.chart.Chart', {
            id:'Graf'+record.get('IdComponente'),
            xtype: 'chart',
            style: 'background:#fff',
            animate: true,
            //columnWidth: 1,
            padding:'5',
            //height:Ext.getCmp('PnlCurvaS').getHeight()-130,
            store: StoreGrafComp,
            shadow: true,
            theme: 'Category1',
            legend: {
                position: 'top'
            },
            axes: [{
                type: 'Numeric',
                minimum: 0,
                position: 'left',
                fields: ['AcumEjecutado', 'AcumProgramado'],
                minorTickSteps: 1,
                grid: {
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 0.5
                    }
                }
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['Fecha']//,
            }],
            series: [ {
                type: 'line',
                highlight: {size: 5,radius: 5},
                title : 'Ejecutado',
                style: {
                    fill: '#FF0000',
                    stroke: '#FF0000',
                    'stroke-width': 3
                },
                axis: 'left',
                smooth: true,
                xField: 'FecAcumEjecutado',
                yField: 'AcumEjecutado',
                tips: {
                    trackMouse: true,
                    width: 200,
                    height: 60,
                    renderer: function(storeItem, item) {
                        this.setTitle('Presupuestado vs Ejecutado');
                        this.update('Presupuestado: '+moneda+storeItem.get('AcumProgramado')+
                            '</br>'+'Ejecutado: '+moneda+storeItem.get('AcumEjecutado')+'</br>');
                    }
                },
                markerConfig: {
                    fill: '#FF0000',
                    stroke: '#FF0000',
                    type: 'circle',
                    size: 5,
                    radius: 5,
                    'stroke-width': 0
                }
            }, {
                type: 'line',
                highlight: {size: 5,radius: 5},
                title : 'Presupuestado',
                style: {
                    fill: '#18428E',
                    stroke: '#18428E',
                    'stroke-width': 3
                },
                axis: 'left',
                smooth: true,
                xField: 'Fecha',
                yField: 'AcumProgramado',
                tips: {
                    trackMouse: true,
                    width: 200,
                    height: 60,
                    renderer: function(storeItem, item) {
                        this.setTitle('Presupuestado vs Ejecutado');
                        this.update('Presupuestado: '+moneda+storeItem.get('AcumProgramado')+
                            '</br>'+'Ejecutado: '+moneda+storeItem.get('AcumEjecutado')+'</br>');
                    }
                },
                markerConfig: {
                    fill: '#18428E',
                    stroke: '#18428E',
                    type: 'circle',
                    size: 5,
                    radius: 5,
                    'stroke-width': 0
                }
            }]
        }); 
                
                var pnl = Ext.create('Ext.panel.Panel', {
                
                id:'Cmp'+record.get('IdComponente'),
                title: record.get('Componente'),
                layout:'fit',
                columnWidth: 1/2,
                collapsible: true,
                split: true,
                autoHide: false,
                useSplitTips: true,
                padding:'5 5 0 0',
                items:grafComp,
                height:Ext.getCmp('PnlCurvaS').getHeight()-130
                
                
            });  
            Ext.getCmp('PnlCurvaS').add(pnl);
            Ext.getCmp('PnlCurvaS').doLayout();
            });
        });   
        
    });
    
    var StoreGrafGenP = Ext.create('Ext.data.Store', {
        model: 'CurvaS',
        pageSize:25,
        proxy: {
        type: 'ajax',
        url: 'proyecto/CurvaS/-1',
        reader: {type: 'json',root: 'grid'}}
        });
               
        
        var grafGenP = Ext.create('Ext.chart.Chart', {
            xtype: 'chart',
            style: 'background:#fff',
            animate: true,
            columnWidth: 1,
            padding:'5',
            height:Ext.getCmp('PnlProyecto').getHeight()-130,
            store: StoreGrafGenP,
            shadow: true,
            theme: 'Category1',
            legend: {
                position: 'right'
            },
            axes: [{
                type: 'Numeric',
                minimum: 0,
                position: 'left',
                fields: ['AcumEjecutado', 'AcumProgramado'],
                minorTickSteps: 1,
                grid: {
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 0.5
                    }
                }
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['Fecha']//,
            }],
            series: [ {
                type: 'line',
                highlight: {size: 5,radius: 5},
                title : 'Ejecutado',
                style: {
                    fill: '#FF0000',
                    stroke: '#FF0000',
                    'stroke-width': 3
                },
                axis: 'left',
                smooth: true,
                xField: 'FecAcumEjecutado',
                yField: 'AcumEjecutado',
                tips: {
                    trackMouse: true,
                    width: 200,
                    height: 60,
                    renderer: function(storeItem, item) {
                        this.setTitle('Presupuestado vs Ejecutado');
                        this.update('Presupuestado: '+moneda+storeItem.get('AcumProgramado')+
                            '</br>'+'Ejecutado: '+moneda+storeItem.get('AcumEjecutado')+'</br>');
                    }
                },
                markerConfig: {
                    fill: '#FF0000',
                    stroke: '#FF0000',
                    type: 'circle',
                    size: 5,
                    radius: 5,
                    'stroke-width': 0
                }
            }, {
                type: 'line',
                highlight: {size: 5,radius: 5},
                title : 'Presupuestado',
                style: {
                    fill: '#18428E',
                    stroke: '#18428E',
                    'stroke-width': 3
                },
                axis: 'left',
                smooth: true,
                xField: 'Fecha',
                yField: 'AcumProgramado',
                tips: {
                    trackMouse: true,
                    width: 200,
                    height: 60,
                    renderer: function(storeItem, item) {
                        this.setTitle('Presupuestado vs Ejecutado');
                        this.update('Presupuestado: '+moneda+storeItem.get('AcumProgramado')+
                            '</br>'+'Ejecutado: '+moneda+storeItem.get('AcumEjecutado')+'</br>');
                    }
                },
                markerConfig: {
                    fill: '#18428E',
                    stroke: '#18428E',
                    type: 'circle',
                    size: 5,
                    radius: 5,
                    'stroke-width': 0
                }
            }]
        });  
        StoreGrafGenP.loadPage(1);    
    
    var PnlCurvaS = Ext.create('Ext.panel.Panel', {
    id:'PnlCurvaS',
    title:'Curva S',
    autoScroll:true,
    layout:'column',
    bodyPadding:'5 0 5 5',
    defaults: {
        //collapsible: true,
        //split: true,
        //animFloat: false,
        //autoHide: false,
        //useSplitTips: true,
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        }
    },
    items:grafGenP,
    tbar: [{
            xtype: 'buttongroup',
            title: 'Filtrar Por Proyecto',
            columns: 1,
            items: [cmbProyecto,{
                    xtype: 'checkbox',
                    boxLabel  : 'Todos Los Proyectos',
                    checked   : true,
                    id        : 'chboxAll'
                }]
        },{
            xtype: 'buttongroup',
            title: 'Filtrar Fechas',
            columns: 1,
            defaults: {
                labelWidth:40,
                width: 150
            },
            items: [{
                xtype: 'datefield',
                anchor: '90%',
                fieldLabel: 'Desde',
                name: 'FechaIni',
                minValue:new Date('01/01/2012'),
                value: new Date('01/01/2012')
            },{
                xtype: 'datefield',
                anchor: '90%',
                fieldLabel: 'Hasta',
                name: 'FechaFin',
                maxValue:new Date('12/31/2012'),
                value: new Date('12/31/2012')
            }]
        }],
    //items:[gridEstadoInventario],
    closable:false
    });

    Ext.getCmp('PnlProyecto').removeAll();   
    Ext.getCmp('PnlProyecto').add(PnlCurvaS);
    
    Ext.getCmp('PnlProyecto').setActiveTab(PnlCurvaS);
 }
 ///
});


return PanelContenedor;
}

});

Ext.define('MyDesktop.Proyecto', {
    extend: 'Ext.ux.desktop.Module',

    requires: [
        'Ext.chart.*'
    ],

    id: 'proyecto',

    refreshRate: 500,

    init : function() {
        // No launcher means we don't appear on the Start Menu...
        this.launcher = {
            text: 'Gestion de Proyectos',
            iconCls:'cpustats',
            handler : this.createWindow,
            scope: this
        };
    },

    createWindow : function() {

        
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('proyecto');
        var ancho = Escritorio.Funciones.Ancho({desktop : desktop});
        var alto = Escritorio.Funciones.Alto({desktop : desktop});
        if(!win){
            
            var smc = new SistIntegral.Proyecto();
            
            win = desktop.createWindow({
                id: 'proyecto',
                title:'Monitoreo de Proyectos',
                width:ancho,
                height:alto,
                iconCls: 'notepad',
                animCollapse:false,
                border: false,
                hideMode: 'offsets',
                layout: 'fit',
                items: [smc.Inicio()]
            });
        }
        else{
            win.setWidth(ancho);
            win.setHeight(alto);
        }
        win.show();
        return win;
    }
});
